<template>
  <div class="wrap">
    <!-- <a-row type="flex" justify="start" style="width:100vw"> -->
    <a-form :wrapper-col="{ span: 15 }" :label-col="{ span: 2 }">
      <a-form-item label="问卷标题：">
        <a-input v-model:value="title" placeholder="请输入问卷标题" @change="change" />
      </a-form-item>
      <a-form-item label="问卷时间：">
        <a-range-picker @change="getData" v-if="isType == 'add'" />
        <a-date-picker v-model:value="paper.start_time" @change="getStartTime" v-if="isType == 'edit'" />
        <span v-if="isType == 'edit'" style="padding: 0 5px">~</span>
        <a-date-picker v-model:value="paper.end_time" @change="getEndTime" v-if="isType == 'edit'" />
      </a-form-item>
      <a-form-item label="问卷状态：">
        <a-select ref="select" v-model:value="value" style="width: 120px" placeholder="请选择状态" @change="change">
          <a-select-option :value="0">未发布</a-select-option>>
          <a-select-option :value="1">已发布</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <!-- </a-row> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { Moment } from 'moment'

const useChangeDateEffect = (props: any, emit: any) => {
  const start_time = ref<string>(props.paper.start_time)
  const end_time = ref<string>(props.paper.end_time)
  const getData = (value: Moment[], dateString: string[]) => {
    start_time.value = dateString[0]
    end_time.value = dateString[1]
    emit('changeStartTime', start_time.value)
    emit('changeEndTime', end_time.value)
  }
  const getStartTime = (value: Moment[], dateString: string) => {
    start_time.value = dateString
    emit('changeStartTime', start_time.value)
  }
  const getEndTime = (value: Moment[], dateString: string) => {
    end_time.value = dateString
    emit('changeEndTime', end_time.value)
  }
  return { start_time, end_time, getData, getStartTime, getEndTime }
}

export default defineComponent({
  props: ['paper', 'isType'],
  emit: ['changeTitle', 'changeStatus', 'changeStartTime', 'changeEndTime'],
  setup(props, { emit }) {
    const value = ref<number>(props.paper.status)
    const title = ref<string>(props.paper.title)
    const { start_time, end_time, getData, getStartTime, getEndTime } = useChangeDateEffect(props, emit)
    watch(props.paper, (newVal) => {
      value.value = newVal.status
      title.value = newVal.title
      start_time.value = newVal.start_time
      end_time.value = newVal.end_time
    })
    const change = () => {
      console.log(value.value)
      emit('changeTitle', title.value)
      emit('changeStatus', value.value)
      emit('changeStartTime', start_time.value)
      emit('changeEndTime', end_time.value)
    }
    return {
      time: ref<Moment[]>([]),
      locale,
      value,
      title,
      start_time,
      end_time,
      getData,
      getStartTime,
      getEndTime,
      change
    }
  }
})
</script>

<style lang="less" scoped>
.wrap {
  margin: 0 25px;
  font-weight: bold;
  border-bottom: 1px solid #c8c8c8;
}
</style>
